<template>
  <div
    id="home"
    @click="
      () => {
        if (!isTry) isTry = !isTry;
      }
    "
  >
    <header>
      <!--<header-base />-->
      <aside id="banner_center">
        <div id="big_title">Explore Toxicology</div>
        <div id="small_title1">
          Quickly find chemical information from authoritative sources
        </div>
        <div id="search_box" class="flex-center" @click.stop="() => ''">
          <aside
            id="try"
            @click.stop="() => (isTry = !isTry)"
            class="handhover flex-start"
          >
            Try
            <div class="triangle fade-transform-leave-active" :class="isTry?'triangle_top':'triangle_bottom'"></div>
            <!-- <i :class="isTry?'el-icon-caret-bottom ':'el-icon-caret-top'"></i> -->
          </aside>
          <!--<aside id="content">-->
          <el-input type="text" 
            class="input-search"
            v-model="searchForm.gene" 
            clearable
            @keyup.enter.native="handleSearch"
            ></el-input>
          <!--</aside>-->
          <aside id="button" class="flex-center" @click="handleSearch">
            <i class="el-icon-search"></i>
          </aside>
          <div id="search_box_muen" v-if="!isTry" @mouseleave="hideSearchBox">
            <h2>Not sure what to seach? Try these example:</h2>
            <ul>
              <li @click="clickSearchLink('700-06-1')">
                <span class="title1">CAS#:</span
                ><span class="title2">700-06-1</span>
              </li>
              <li @click="clickSearchLink('Salicylic')">
                <span class="title1">Chemlcal Name:</span
                ><span class="title2">Salicylic</span>
              </li>
              <li>
                <span class="title1">Publication:</span>
                <span class="title2" @click="clickSearchLink('TR-580');">TR-580、</span>
                <span class="title2" @click="clickSearchLink('TOX-48');">TOX-48</span>
              </li>
              <li
                @click="clickSearchLink('Radiofrequency radiation emissions from cellular phones');
                "
              >
                <span class="title1">Project:</span
                ><span class="title2"
                  >Radiofrequency radiation emissions from cellular phones</span
                >
              </li>
              <li @click="clickSearchLink('002-02223-0003-0000-4')">
                <span class="title1">CEBS Accessioon Number:</span
                ><span class="title2">002-02223-0003-0000-4</span>
              </li>
              <li @click="clickSearchLink('20203-01')">
                <span class="title1">NTP TDMS Number:</span
                ><span class="title2">20203-01</span>
              </li>
              <li @click="clickSearchLink('Micronucieus')">
                <span class="title1">NTP Study Type:</span
                ><span class="title2">Micronucieus</span>
              </li>
              <li @click="clickSearchLink('Hematoloy')">
                <span class="title1">Data Typer:</span
                ><span class="title2">Hematoloy</span>
              </li>
              <!-- <li id="big_li" @click="searchForm.gene = 'TR-580、TOX-48'">
                <span class="title1">Study Number:</span>
                <div>
                  <div>
                    <span class="title3">CEBS Accessioon Number:</span
                    ><span class="title2">002-02223-0003-0000-4</span>
                  </div>
                  <div>
                    <span class="title3">NTP TDMS Number:</span
                    ><span class="title2">20203-01</span>
                  </div>
                </div>
              </li>
              <li id="big_li">
                <span class="title1">Study and Data Typer:</span>
                <div>
                  <div>
                    <span class="title3">NTP Study Type:</span
                    ><span class="title2">Micronucieus</span>
                  </div>
                  <div>
                    <span class="title3">Data Typer:</span
                    ><span class="title2">Hematoloy</span>
                  </div>
                </div>
              </li> -->
            </ul>
          </div>
        </div>
        <div id="small_title2">
          <div class="title" v-for="(item, index) in smallTitle" :key="index">
            {{ item }}
          </div>
        </div>
      </aside>
      <aside id="banner_bottom">
        <div
          id="banner_bottom_box"
          class="flex-center"
          v-for="(item, index) in bannerBottomData"
          :key="index"
        >
        <!-- :style="{width:item.width+'px',height:item.height+'px'}" -->
          <div id="banner_ico" ><img :src="item.ico"  alt="" /></div>
          <div id="banner_content">
            <div id="banner_content_size">{{ item.size }}</div>
            <div id="banner_content_name">{{ item.name }}</div>
          </div>
        </div>
      </aside>
    </header>
    
    <article id="h_pie">
      <div class="h_pie_bk">
        <div id="pie_li1">
          <table>
            <caption>
              Toxicity Category
            </caption>
            <thead>
              <tr>
                <th>Name</th>
                <th></th>
                <th style="text-align: right">Endpoints</th>
              </tr>
            </thead>
            <tbody>
              <!-- ToxicityCategoryDate -->
              <tr v-for="(item, index) in myChartData1" :key="index">
                <td style="width: 15px;">
                  <div
                    class="flex-center"
                    style="
                      background-color: #fff;
                      width: 15px;
                      height: 15px;
                      border-radius: 50%;
                    "
                  >
                    <div :style="{ backgroundColor: color[index] }"></div>
                  </div>
                </td>
                <td style="width:230px; padding-right: 46px;cursor: pointer;" @click="toXorF('0',index,item.name)">{{ item.name }}</td>
                <td>{{ item.num}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="pie"></div>
        <div id="pie_li2">
          <table>
            <caption>
              Features Domain
            </caption>
            <thead>
              <tr>
                <th>Name</th>
                <th></th>
                <th style="text-align: right">type</th>
              </tr>
            </thead>
            <tbody>
              <!-- FeaturesDomain -->
              <tr v-for="(item, index) in myChartData2" :key="index">
                <td>
                  <div
                    class="flex-center"
                    style="
                      background-color: #fff;
                      width: 15px;
                      height: 15px;
                      border-radius: 50%;
                    "
                  >
                    <div :style="{ backgroundColor: color2[index] }"></div>
                  </div>
                </td>
                <td style="width:210px; padding-right: 27px;cursor: pointer;" @click="toXorF('1',index,item.name)">{{ item.name }}</td>
                <td>{{ item.num }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <!--<div id="pie_logo">
        <img src="../../assets/img/logo_2.png" alt="">
      </div>-->
      <div id="bg_ico"></div>
    </article>

    <article id="h_sea">
      <h2>Functions of CancerS</h2>
      <div id="sea_box">
        <div class="sea">
          <div class="sea_title">Toxicity and Multi- dimensional Feature</div>
          <div class="sea_title2">
            Provide multi label and multi-dimensional characteristic data of
            toxicity of 100000 + compounds, which have been cleaned,
            standardized and analyzed
            <div class="toPath flex-around">
              <span @click="$router.push('/toxicity')"><i class="el-icon-link"></i>Toxicity</span>
              <span @click="$router.push('/collectionFeature')"><i class="el-icon-link"></i>Multi-dimensional Feature</span>
            </div>
          </div>
          <div class="sea_ico" >
            <i class="el-icon-right"></i>
          </div>
        </div>
        <div class="sea">
          <div class="sea_title">Batch Search and Download</div>
          <div class="sea_title2">
            The data query of compounds can be completed through search and
            batch search, and specific Endpoint data sets can also be retrieved.
            These data are supported for download
            <div class="toPath flex-around">
              <span @click="$router.push('/search')"><i class="el-icon-link"></i>Batch Search</span>
              <span @click="$router.push('/download')"><i class="el-icon-link"></i>Download</span>
            </div>
          </div>
          <div class="sea_ico" @click="$router.push('/search')">
            <i class="el-icon-right"></i>
          </div>
        </div>
        <div class="sea">
          <div class="sea_title">Benchmark</div>
          <div class="sea_title2">
            In benchmark, you can find a variety of toxicity prediction tests
            and calculation results under different characteristics, so as to
            broaden your research ideas
            <div class="toPath flex-around">
              <span @click="$router.push('/benchmark')"><i class="el-icon-link"></i>Benchmark</span>
            </div>
          </div>
          <div class="sea_ico" @click="$router.push('/benchmark')">
            <i class="el-icon-right"></i>
          </div>
        </div>
      </div>
      <div id="s_lodder"></div>
      <div id="x_looder"></div>
    </article>
    <article id="statistic">
      <div id="s_title">Statistic</div>
      <div id="s_box">
        <div id="s_info"></div>
        <div id="s_map"></div>
      </div>
    </article>
  </div>
</template>

<script>
import echarts from "echarts";
import { location } from "@/api/location";
export default {
  data() {
    return {
      navData: [
        "Home",
        "Data Collections",
        "Search",
        "Donwload",
        "Statistics",
        "Benchmark",
        "Contact & About",
      ],
      navDataLight: "Home",
      smallTitle: ["Helpatotoxicity", "aspirm", "C9H8o4", "C1=CC=C(C=C1)C=O"],
      isTry: true,
      bannerBottomData: [
        {
          ico: require("../assets/img/icon1-1.png"),
          size: '113k+',
          name: "Compound",
          width:38,
          height:47
        },
        {
          ico: require("../assets/img/icon1-2.png"),
          size: '13',
          name: "Toxicity Categories",
          width:32,
          height:48
        },
        {
          ico: require("../assets/img/icon1-3.png"),
          size: '200+',
          name: "Endpoints",
          width:25,
          height:47
        },
        {
          ico: require("../assets/img/icon1-4.png"),
          size: '10+',
          name: "Multi-Dimensional Features",
          width:42,
          height:39
        },
      ],
      pieData: [
        {
          name: "物理机",
          value: 20,
        },
        {
          name: "宿主机",
          value: 10,
        },
        {
          name: "云主机",
          value: 30,
        },
        {
          name: "网络设备",
          value: 40,
        },
        {
          name: "安全设备",
          value: 40,
        },
        {
          name: "应用系统",
          value: 40,
        },
        {
          name: "存储设备",
          value: 40,
        },
        {
          name: "网络服务",
          value: 40,
        },
        {
          name: "终端PC",
          value: 40,
        },
      ],
      myChart: null,
      color:[
        "#7846E5",
        "#9468FD",
        "#737EFE",
        "#516AFE",
        "#50A9F8 ",
        "#3B56FF",
        "#01B7DC",
        "#1FD77C",
        "#41BCB3 ",
        "#5AD8A6",
        "#3A95FF",
        "#4ea0ff",
        "#936bea",
        "#b495fe",
        
      ],
      color2:[
        "#FFCF30",
        "#FFAA53",
        "#FE9269",
        "#FE6A69",
        "#F54867 ",
        "#F5488B",
      ],
      myChartData1: [],
      myChartData2: [],
      searchForm: {
        gene: "",
      },
    };
  },
  computed: {
    isPhone() {
      return this.$store.state.isPhone;
    },
  },
  watch:{
    myChartData1(){
      this.initCharts()
    },
    myChartData2(){
      this.initCharts()
    },
  },
  mounted() {
    this.initCharts();
    // 监听屏幕宽度变化：当浏览器发生resize事件的时候，触发echart的resize事件，重绘canvas
    window.addEventListener("resize", () => {
      this.changeWidth();
    });
    let revolverMaps = document.querySelector("#s_map");
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.async = "async";
    // script.src =
    //   "//rf.revolvermaps.com/0/0/6.js?i=5yzljq267ym&amp;m=0&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=1";
    script.src =
      "//rf.revolvermaps.com/0/0/7.js?i=5gaqiyflid2&m=0c&c=835ad9&cr1=835ad9&lo=16&oo=10&sx=0&rs=60&rg=60&cw=ffffff&cb=9d8b63"
    revolverMaps.append(script);
    // this.getLocation()//获取地理位置信息
  },
  created() {
    this.getPieData();
  },
  methods: {
    /**获取地图定位 1*/
    getLocation() {
      let _that = this;
      let geolocation = location.initMap("map-container"); //定位
      AMap.event.addListener(geolocation, "complete", result => {
        console.log(result)
        _that.lat = result.position.lat;
        _that.lng = result.position.lng;
        _that.province = result.addressComponent.province;
        _that.city = result.addressComponent.city;
        _that.district = result.addressComponent.district;
      });
    },
    //控件header菜单激活
    navActiveClick(item) {
      this.navDataLight = item;
    },
    //设置pie图方法
    initCharts() {
      let that = this;
      // 初始化echarts实例
      let myChart = echarts.init(document.getElementById("pie"));
      this.myChart = myChart;
      // 饼图调色板
      let color = [
        "#7846E5",
        "#9468FD",
        "#737EFE",
        "#516AFE",
        "#50A9F8 ",
        "#3B56FF",
        "#01B7DC",
        "#1FD77C",
        "#41BCB3 ",
        "#5AD8A6",
        "#3A95FF",
      ];
      var option = {
        tooltip: { formatter: "{a} <br/>{b} : {c} ({d}%)" },
        graphic: {
          //图形中间图片
          elements: [
            {
              type: "image",
              scaleX: 1,
              scaleY: 1,
              originX: 0,
              originY: 0,
              bounding: "all",
              style: {
                image: require("../assets/img/logo_2@2x.png"), //你的图片地址
                width: this.isPhone ? 66 : 88,
                height: this.isPhone ? 58 : 78,
              },
              left: "center",
              top: "center",
            },
            {
              type: "circle",
              style: {
                fill: "#fff",
              },
              left: "center",
              top: "40%",
            },
          ],
        },
        series: [
          {
            type: "pie",
            radius: ["60%", "90%"],
            center: ["50%", "50%"],
            color:that.color,
            label: {
              show: false,
            },
            labelLine: {
              length: 17,
              length2: 18,
            },
            itemStyle: {
              // 此配置
              normal: {
                borderWidth: 5,
                borderColor: "#F3F1FF ",
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(243, 241, 255, 0.5)",
              },
            },
            legend: {},
            name: "Toxicity",
            data: that.myChartData1,
          },
          {
            type: "pie",
            radius: ["30%", "50%"],
            center: ["50%", "50%"],
            color:that.color2,
            label: {
              show: false,
            },
            itemStyle: {
              // 此配置
              normal: {
                borderWidth: 5,
                borderColor: "#F3F1FF ",
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(243, 241, 255, 0.5)",
              },
            },
            name: "Feature",
            data: that.myChartData2,
          },
        ],
      };
      
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.on('click', function (params) {
        that.toXorF(params.seriesIndex,params.dataIndex,params.name)
      })
    },
    toXorF(type,index,name){
      if(type == 1){// 1 Feature
        this.$router.push({
            path:'/collectionFeature',
            query:{
              name:name,
              idx:index,
            }
          })
      }else{// 0 toxicity
        this.$router.push({
            path:'/toxicity',
            query:{
              name:name,
              idx:index,
            }
          })
      }

    },
    //pie图刷新
    changeWidth() {
      this.myChart.resize();
    },
    //获取pie数据
    getPieData() {
      this.$api.getToxicityCategory().then((res) => {
        let sum = 0;
        this.myChartData1 = res.map((item) => {
          sum = sum + item.compound_num;
          return {
            num:item.num,
            value: item.compound_num,
            name: item.category,
          };
        });
        this.myChartData1.sum = sum;
        // console.log(this.myChartData1,'this.myChartData1')
      });

      this.$api.getFeatureCategory().then((res) => {
        let sum = 0;
        this.myChartData2 = res.map((item) => {
          sum = sum + item.compound_num;
          return {
            num:item.num,
            value: item.compound_num,
            name: item.category,
          };
        });
        this.myChartData2.sum = sum;
        // console.log(this.myChartData2,'this.myChartData2')
      });
    },
    clickSearchLink(value){
      this.searchForm.gene = value
      this.handleSearch()
    },
    // 搜索
    handleSearch() {
      this.$router.push({
        path: "/searchAcuratCompound",
        query: this.searchForm,
      });
    },
    // 隐藏 try  下拉
    hideSearchBox() {
      this.isTry = !this.isTry;
    },
  },
};
</script>

<style lang="scss" scoped>
#home {
  // position: absolute;
  // top: 0;
  width: 100%;
  height: 100%;
  width: 100%;
  margin-top: -0.74rem;
  header {
    //font-size: 14.4*100px;
    width: 100%;
    background-image: url(~@/assets/img/banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    #banner_center {
      width: 100%;
      height: 500px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      #big_title {
        //width: 5 * 100px;
        height: 0.83 * 100px;
        padding-bottom: 16px;
        font-size: 0.48 * 100px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 0.67 * 100px;
        padding-bottom: 0.16 * 100px;
      }
      #small_title1 {
        //width: 5 * 100px;
        height: 0.22 * 100px;
        font-size: 0.18 * 100px;
        font-family: Helvetica;
        color: rgba(255,255,255,0.65);
        line-height: 0.22 * 100px;
        padding-bottom: 0.08 * 100px;
        text-align: center;
      }
      #small_title2 {
        //width: 4.21 * 100px;
        height: 0.3 * 100px;
        color: rgba(255,255,255,0.65);
        line-height: 0.19 * 100px;
        font-size: 0.16 * 100px;
        font-family: Helvetica;
        display: flex;
        justify-content: space-between;
        padding-top: 0.08 * 100px;
        .title {
          margin: 0 10px;
        }
      }
      #search_box {
        position: relative;
        width: 620px;
        height: 50px;
        background: #f1f2f7;
        border-radius: 2px;
        padding-left: 14px;
        margin: 8px 0;
        #try {
          width: 40px;
          height: 24px;
          font-size: 14px;
          font-family: Helvetica;
          color: #17233d;
          line-height: 24px;
          position: relative;
          .triangle{
            position: absolute;
            right: 0;
            border-style: solid;
            border-width: 5px;
            border-color: transparent transparent #000 transparent;
            width: 5px;
            height: 5px;
          }
          .triangle_top{
            top:45%;
            transform: translate(-50%,0) rotate(180deg);
          }
          .triangle_bottom{
            top: calc(45% - 5px);
            transform: translate(-50%,0) rotate(0deg);
          }
        }
        .input-search{
          margin:0;
          width:calc(100% - 70px);
          /deep/.el-input__inner{
            background: #f1f2f7;
            border: none !important;
          }
        }
        #button {
          width: 88px;
          height: 50px;
          background: linear-gradient(270deg, #8853ff 0%, #5564fe 100%);
          border-radius: 0px 2px 2px 0px;
          font-size: 28px;
          color: #ffffff;
          cursor: pointer;
        }
        input {
          margin-left: 10px;
          flex: 1;
        }
        #search_box_muen {
          //display: none;
          width: 620px;
          background-color: #fff;
          position: absolute;
          top: 55px;
          left: 0px;
          z-index: 999;
          ul {
            padding-left: 30px;
            list-style: disc;
          }
          li {
            line-height: 25px;
          }

          h2 {
            //width: 334px;
            height: 20px;
            font-size: 16px;
            font-family: Helvetica-Bold, Helvetica;
            font-weight: bold;
            color: #17233d;
            line-height: 20px;
            margin-left: 16px;
          }
          .title1 {
            width: 91px;
            height: 22px;
            font-size: 14px;
            font-family: Helvetica-Bold, Helvetica;
            font-weight: bold;
            color: #515a6e;
            line-height: 22px;
          }
          .title2 {
            width: 302px;
            height: 20px;
            font-size: 12px;
            font-family: Helvetica;
            color: #6e5bfe;
            line-height: 20px;
          }
          .title3 {
            width: 91px;
            height: 22px;
            font-size: 12px;
            font-family: Helvetica-Bold, Helvetica;
            font-weight: bold;
            color: #515a6e;
            line-height: 22px;
          }
        }
      }
    }
    @media screen and (max-width: 768px) {
      #banner_center {
        #search_box {
          width: 80vw;
          #search_box_muen {
            width: 80vw;
          }
        }
      }
    }
    #banner_bottom {
      width: 1440px;
      height: 0.9 * 100px;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      #banner_bottom_box {
        width: 3.48 * 100px;
        height: 0.9 * 100px;
        display: flex;
        // justify-content: center;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.1) 0%,
          rgba(255, 255, 255, 0.3) 100%
        );

        #banner_ico {
          width:45px;height: 43px;
          // width: 1.28 * 100px;
          // height: 0.47 * 100px;
          // padding: 0.22 * 100px 0.12 * 100px 0.21 * 100px 0;
          text-align: right;
          img{width:100%;height: 100%;}
        }
        #banner_content {
          // width: 2.08 * 100px;
          // height: 0.9 * 100px;
          max-width: calc(100% - 50px);
          overflow: hidden;
          text-align: left;
          margin-left: 16px;
          #banner_content_size {
            font-size: 0.32 * 100px;
            font-family: Helvetica-Bold, Helvetica;
            font-weight: bold;
            color: #ffffff;
            // margin: 0.13 * 100px 0 0.03 * 100px 0;
            span {
              height: 0.22 * 100px;
              font-size: 0.18 * 100px;
              font-weight: 500;
              font-family: Helvetica;
              color: #ffffff;
              line-height: 0.22 * 100px;
              margin-left: 0.06 * 100px;
            }
          }

          #banner_content_name {
            height: 0.22 * 100px;
            font-size: 0.18 * 100px;
            font-family: Helvetica;
            color: #ffffff;
            line-height: 0.22 * 100px;
            margin-top:3px;
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    @media screen and (max-width: 768px) {
      #banner_bottom {
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100vw;
        height: auto;
        #banner_bottom_box {
          width: 40vw;
          height: auto;
          margin-bottom: 10px;
        }
      }
    }
  }
  #h_pie {
    width: 100%;
    background-color: #f3f1ff;
    height: 8 * 100px;
    position: relative;
    overflow: hidden;
    #bg_ico {
      background-image: url(~@/assets/img/home_bg3.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right bottom;
      width: 450px; height: 552px;
      position: absolute;
      right: 0;
      bottom: -52px;
      z-index: 2;
    }
    .h_pie_bk{
      width: 1440px;
      height: 8 * 100px;
      display: flex;
      justify-content: space-evenly;
      margin: 0 auto;
      position: absolute;
      top:0;left: 50%;
      transform: translate(-50%,0);
      z-index: 3;
       #pie_li1 {
        width: 320px;
        margin: 124px 77px 0 120px;
        caption {
          font-size: 0.28 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #17233d;
          padding-bottom:10px;
        }
        th {
          font-size: 0.14 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #808695;
        }
        tr {
          font-size: 0.14 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #515a6e;
          width: 1.57 * 100px;
          height: 0.32 * 100px;
          // padding:20px 0;
          // line-height: 0.32 * 100px;
          div {
            width: 0.13 * 100px;
            height: 0.13 * 100px;
            border-radius: 50%;
          }
          td {
            padding: 10px 0;
          }
        }
      }
      #pie_li2 {
        width: 286px;
        margin: 124px 91px 0 120px;
        caption {
          font-size: 0.28 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #17233d;
          padding-bottom:10px;
        }
        th {
          font-size: 0.14 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #808695;
        }
        tr {
          font-size: 0.14 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #515a6e;
          height: 0.32 * 100px;
          line-height: 0.32 * 100px;
          div {
            width: 0.13 * 100px;
            height: 0.13 * 100px;
            border-radius: 50%;
          }
        }
      }
      #pie {
        width: 446px;
        //height: 100%;
      }
    }
    
   
  }
  @media screen and (max-width: 768px) {
    #h_pie {
      flex-direction: column;
      justify-content: center;
      height: auto;
      #pie_li1 {
        width: 100vw;
        margin: 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #pie_li2 {
        width: 100vw;
        margin: 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #pie {
        width: 100vw;
        height: 446px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  #h_sea {
    height: 388px;
    width: 100%;
    background-color: #4629c0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    h2 {
      //width: 3.73 * 100px;
      height: 0.45 * 100px;
      margin: 0 auto 0.41 * 100px auto;
      font-size: 0.32 * 100px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 0.45 * 100px;
      text-align: center;
    }
    #sea_box {
      //width: 13 * 100px;
      width: 1200px;
      height: 2.25 * 100px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      .sea:nth-child(1) {
        background-image: url(~@/assets/img/pic1.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .sea:nth-child(2) {
        background-image: url(~@/assets/img/pic2.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .sea:nth-child(3) {
        background-image: url(~@/assets/img/pic3.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .sea {
        display: inline-block;
        width: 390px;
        height: 225px;
        text-align: center;
        position: relative;
        .sea_title {
          display: flex;
          //text-align: center;
          align-items: center;
          justify-content: center;
          margin-top: 0.69 * 100px;
          width: 100%;
          //padding: 0 0.6 * 100px;
          height: 0.84 * 100px;
          font-size: 0.24 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #ffffff;
          background: rgba(41, 32, 77, 0.85);
        }
        .sea_title2 {
          display: none !important;
          //text-align: center;
          width: 100%;
          padding-top: 55px;
          height: 100%;
          font-size: 16px;
          font-family: Helvetica;
          color: #ffffff;
          background: rgba(41, 32, 77, 0.85);
          box-sizing: border-box;
          .toPath{
            width:80%;
            margin: 10px auto 0 auto;
            cursor: pointer;
            span{
              border-bottom:1px solid #fff;
              &:hover {
                color:#835AD9;
                border-bottom:1px solid #835AD9;
              }
            }
          }
        }
        &:hover {
          .sea_title2 {
            display: block !important;
          }
          .sea_title {
            display: none;
          }
        }
        .sea_ico {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 0.24 * 100px;
          height: 0.24 * 100px;
          background: linear-gradient(to left, #5564fe, #8853ff);
          color: #fff;
          font-size: 0.14 * 100px;
          position: absolute;
          bottom: 3px;
          right: 3px;
        }
      }
    }
    #s_lodder {
      position: absolute;
      top: -24px;
      left: 50%;
      margin-left: -188px;
      border-width: 0 0.4 * 100px 0.25 * 100px 0.4 * 100px;
      border-color: transparent transparent #4629c0 transparent;
      border-style: solid;
      width: 3.76 * 100px;
    }
    #x_looder {
      position: absolute;
      bottom: -24px;
      left: 50%;
      margin-left: -188px;
      border-width: 0.25 * 100px 0.4 * 100px 0 0.4 * 100px;
      border-color: #4629c0 transparent transparent transparent;
      border-style: solid;
      width: 3.76 * 100px;
    }
  }
  @media screen and (max-width: 768px) {
    #h_sea {
      //height: 4.15 * 100px;
      //width: 100%;
      background-color: #4629c0;
      width: 100%;
      height: 800px;
      h2 {
        width: 3.73 * 100px;
        height: 0.45 * 100px;
        margin: 0 auto 0.41 * 100px auto;
        font-size: 0.32 * 100px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 0.45 * 100px;
      }
      #sea_box {
        width: 100%;
        height: 700px;
        margin: 0 auto;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        align-items: center;
        .sea:nth-child(1) {
          background-image: url(~@/assets/img/pic1.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        }
        .sea:nth-child(2) {
          background-image: url(~@/assets/img/pic2.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        }
        .sea:nth-child(3) {
          background-image: url(~@/assets/img/pic3.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        }
        .sea {
          display: inline-block;
          width: 80%;
          height: 2.25 * 100px;
          text-align: center;
          position: relative;
          .sea_title {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 0.69 * 100px;
            width: 100%;
            padding: 0;
            height: 0.84 * 100px;
            font-size: 0.24 * 100px;
            font-family: Helvetica-Bold, Helvetica;
            font-weight: bold;
            color: #ffffff;
            background: rgba(41, 32, 77, 0.85);
          }
          .sea_ico {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 0.24 * 100px;
            height: 0.24 * 100px;
            background: linear-gradient(to left, #5564fe, #8853ff);
            color: #fff;
            font-size: 0.14 * 100px;
            position: absolute;
            bottom: 3px;
            right: 3px;
          }
        }
      }
      #s_lodder {
        display: none;
      }
      #x_looder {
        display: none;
      }
    }
  }
  #statistic {
    width: 100%;
    height: 6 * 100px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    #s_title {
      width: 1.27 * 100px;
      height: 0.45 * 100px;
      font-size: 0.32 * 100px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #17233d;
      line-height: 0.45 * 100px;
      margin: 0.51 * 100px auto 0;
    }
    #s_box {
      flex: 1;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      #s_info {
        width: 306px;
        height: 240px;
        background-image: url(~@/assets/img/s_info.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      #s_map {
        width: 848px;
        height: 395px;
        padding-left: 46px;
        // background-image: url(~@/assets/img/s_map.png);
        // background-repeat: no-repeat;
        // background-size: cover;
        // background-position: center;
      }
    }
  }
  @media screen and (max-width: 768px) {
    #statistic {
      height: auto;
      #s_box {
        flex-direction: column;
        #s_map {
          width: 100vw;
          padding: 0;
        }
      }
    }
  }
}
footer {
  width: 100%;
  height: 113px;
  background: #3f3664;
  padding-right: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .logo {
    margin-left: 120px;
    margin-right: 89px;
    width: 145px;
    height: 40px;
    background-image: url(~@/assets/img/logo_1@2x.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .footer_ico {
    flex: 1;
    font-size: 14px;
    font-family: Helvetica;
    color: rgba(255, 255, 255, 0.85);
    line-height: 17px;
    display: flex;
    justify-content: space-evenly;
  }
}
.handhover {
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  footer {
    padding-right: 5vw;
    .footer_ico {
      flex-direction: column;
    }
    .logo {
      margin: 0 5vw 0 5vw;
    }
  }
}
</style>
